<template>
    <h2 style="text-align: center;">添加页面</h2>
    {{ form }}
    <table class="table" style="width: 600px;margin: 10px auto">
        <tbody>
            <tr>
                <td>名称:</td>
                <td>
                    <input type="text" v-model="form.name" class="form-control">
                </td>
            </tr>
            <tr>
                <td>图标:</td>
                <td>
                    <input type="text" v-model="form.tubiao" class="form-control">
                </td>
            </tr>
            <tr>
                <td>说明:</td>
                <td>
                    <input type="text" v-model="form.shuoMing" class="form-control">
                </td>
            </tr>

            <tr>
                <td>图片:</td>
                <td>
                    <img :src="form.tuPian" style="max-width: 100px; max-height: 100px;"><br>
                    <input type="file" @change="upload">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-primary" v-on:click="empAdd">添加</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">

//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter } from "vue-router";

//变量
//系统路由(跳转)(2)
const router = useRouter();
//会员信息
const form = reactive({
    name: "",
    tubiao: "",
    shuoMing: "",
    tuPian: ""
})

//用户级别列表(下拉列表)

//方法
const empAdd = () => {
    if (!form.name) {
        alert("姓名不能为空");
        return;
    }
    if (!form.shuoMing) {
        alert("说明不能为空");
        return;
    }
    if (!form.tuPian) {
        alert("图片不能为空");
        return;
    }


    axios.post("https://localhost:7209/api/Huiyuan/Add", form).then(res => {
        if (res.data > 0) {
            alert("添加成功");
            //跳转到列表页(3)
        }
        else {
            alert("添加失败");
        }
    }).catch(err => {
        console.log(err);
    })
}



//上传图片方法
const upload = (e: any) => {
    //定义表单
    var fd = new FormData();
    var fff = e.target.files[0];
    fd.append("file", fff)
    axios.post("https://localhost:7209/api/Huiyuan/Tupian", fd).then(res => {
        //把上传成功后的文件名，赋值给 双向绑定的变量
        form.tuPian = res.data;
    }).catch(err => {
        console.log(err);
    })
}
</script>
